$bg-color: #F90;
$bg-color: blue;

$oragered:orangered;

.one {
    background-color: $bg-color;
}



.two {
    $bg-color: rgb(37, 15, 15);
    background-color: $bg-color;
}



.three {
    background-color: $bg-color;
}

.selected {
    border: 1px solid $oragered;
}


#content article h1 {
    color: #333
}

#content article p {
    margin-bottom: 1.4em
}

#content aside {
    background-color: #EEE
}

#content {
    .article {
        h1 {
            color: #333;

            p {
                color: #333;
            }
        }

        p {
            color: #333;
        }

        aside {
            background-color: #EEE
        }
    }
}


.one {
    background-color: red;

    :hover {
        background-color: yellow;
    }

    &:hover {
        background-color: yellow;
    }
}


.one {
    p {
        color: red;

    }

    span {
        color: blue;
    }
}





.two,
.three {
    p {
        color: red;

    }

    span {
        color: blue;
    }
}

nav {
    border: {
        style: solid;
        width: 1px;
        color: $oragered;
    }
}

.nav {
    border-style: dashed;
    border-width: 2px;
}

.nav {
    border: 1px $oragered solid;
}



@import "./base.scss";

$abc :blue !default;

.one {
    color: $abc;

    @import "./base.scss";
}


@mixin box_shadow {
    -moz-box-shadow: 2px 2px 5px #d7d7d7;
    -webkit-box-shadow: 2px 2px 5px #d7d7d7;
    box-shadow: 2px 2px 5px #d7d7d7;
}

.m-card {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 2px;

    @include box_shadow;
}

@mixin wh($width, $height, $color) {
    width: $width/2;
    height: $height+px;
    color: $color;
}

.one {
    @include wh(100, 200, red);
}


.one {
    @include wh(100, 200, red);
}


@mixin wh($width:200,
$height:500,
$color:blue) {
    width: $width+px;
    height: $height;
    color: $color;
}

.one {
    width:99px;
    @include wh();
    
}

.simple-card {
    border: 1px solid red;
    background-color: #fdd;
}

.simple-card-bg_blue {

    border-color: blue;
    @extend .simple-card;
}